<template>
  <div>
      <header-cmp>
      </header-cmp>
      <div class="zt">
        <div class="phone">
          <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*"/>
        </div>
        <div class="yzm">
          <input type="text" v-model="code" placeholder="请输入验证码" pattern="[0-9]*"/>
          <button :disabled="disabled" @click="sendCode"><span>{{text}}</span></button>
        </div>
        <div class="login" @click="login"><span>登 录</span></div>
        <div class="qh">
          <span @click="tz">密码登录</span>
          <span @click="zc">快速注册</span>
        </div>
      </div>
  </div>
</template>

<script>
import HeaderCmp from '../components/HeaderCmp.vue'
import { Toast } from 'mint-ui';
import axios from 'axios'
import {mapMutations} from 'vuex'
export default {
  data(){
    return{
    userTel:'',
    disabled:false,
    rules:{
      //手机号验证规则
      userTel:{
          rule:/^1[23456789]\d{9}$/,
          msg:'手机号不能为空，并且是11位数字'
      }
    },
    time:60,
    text:'获取短信验证码',
    data:'',
    code:''
    }
  },
  components:{
    HeaderCmp

  },
  methods:{
    ...mapMutations(['USER_LOGIN']),
    zc(){
      this.$router.push('/reg')
    },
    tz(){
      this.$router.push('/user')
    },
    sendCode(){
      if(this.validate('userTel')) return
      //请求短信验证码
      axios({
          url:"/ajax/code",
          method:'POST',
          data:{
            phone:this.userTel,
          }
      }).then(({data})=>{
        this.data=data.data
      }).catch(err=>{
        console.log(err)
      })
      this.disabled=true
      let timer=setInterval(()=>{
        --this.time
        this.text=`重新发送${this.time}`
      },1000)
      setTimeout(()=>{
        clearInterval(timer)
        this.time=60;
        this.disabled=false;
        this.text='获取短信验证码'
      },60000)
    },
    validate(key){
      if(!this.rules[key].rule.test(this[key])){
          Toast(this.rules[key].msg)
          return true
      }
    },
    login(){
      if(this.validate('userTel')) return
      if(this.data===''){
        Toast('请获取验证码')
        return
      }
      let data=this.data.toString()
        if(data !== this.code){
            Toast('验证码有误')
            return
        }
      if(this.data==this.code){
        //手机验证码注册登录一体化，验证码正确就发送请求
        axios({
          url:"/ajax/addUser",
          method:'POST',
          data:{
            phone:this.userTel,
          }
        }).then(({data})=>{
          console.log(data)
            if(this.validate('userTel')) return
            if(!data.success) return
            Toast(data.msg)
            //将公用数据存到vuex中
            this.USER_LOGIN(data.data)
            this.$router.push({name:'my'})
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.phone{
  width: 85%;
  height: 30px;
  input{
    width: 100%;
    height: 30px;
  }
}
.yzm{
      display: flex;
  width: 85%;
  height: 30px;
  margin-top: 5%;
  margin-bottom: 5%;
  input{
    width: 68%;
    height: 30px;
  }
  button{
    width:32%;
    height: 30px;
    background-color: red;
    border-radius: 10px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
  }
}
.login{
  width: 85%;
  height: 30px;
  background-color: red;
  border-radius: 10px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}
.qh{
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
}
.zt{
    margin-left: 10%;
    margin-top: 5%;
}
</style>